<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
    <div id="chart1" style="width: 600px;height:400px;"></div>
</div>
<div style="margin-top: 100px">
    <div id="chart2" style="width: 600px;height:400px;"></div>
</div>

<script type="text/javascript">
    var dataX1 = ['aa', 'bb', 'cc'];
    var dataValue1 = [1, 4, 3];
    var dataX2 = ['系统1', '系统2', '系统3'];
    var dataValue2 = [1, 3, 4];
    drawCharts();

    function drawCharts() {
        var chart1 = echarts.init(document.getElementById('chart1'));
        chart1.setOption(getOption('公司-检修次数折线图', '公司和公司检修次数', '检修次数', dataX1, dataValue1));
        var chart2 = echarts.init(document.getElementById('chart2'));
        chart2.setOption(getOption('检修系统-检修次数折线图', '检修系统和检修系统检修的次数', '检修次数', dataX2, dataValue2));
    }

    function getOption(title, subtext, name, dataX, dataValue) {
        return {
            color: ['#409EFF'],
            title: {
                text: title,//主标题
                subtext: subtext//副标题
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: [name]//鼠标hover显示
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dataX,
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: name,//鼠标hover显示
                type: 'line',
                stack: '总量',
                data: dataValue,
            }]
        };
    }
</script>

</body>
</html>
